<template>
  <div class="payMethod">
    <navBar title="选择支付方式" @onClickLeft="onClickLeft" />
    <div class="payMethod-content">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="支付宝" clickable @click="radio = '1'" class="select-item ">
            <template #title>
              <div class="zfb"></div>支付宝
            </template>
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
          <!-- <van-cell title="微信" clickable @click="radio = '2'" class="select-item">
            <template #title>
              <div class="wx"></div>微信
            </template>
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell> -->
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="btn-box">
     <van-button round type="info" block @click="goPay">确认支付</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      radio: "2"
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    goPay() {
      this.$router.push({
        path: '/pay/payInfo',
        query: {
          pay_info_id: this.$route.query && this.$route.query.pay_info_id,
          pay_type: this.radio,
          front_url: this.$route.query && this.$route.query.front_url
        }
      })
    }
  },
};
</script>

<style lang='less'>
.payMethod {
  &-content {
    .select-item {
      .imgBox{
        width: 25px;
        height: 25px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
      .zfb {
        .imgBox ();
        background: url('../../assets/img/icons/zfb.png') no-repeat;
        background-size: 100%;
      }
      .wx {
        .imgBox ();
        background: url('../../assets/img/icons/wx.png')  no-repeat;
        background-size: 100%;
      }
    }
  }
  .btn-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    position: fixed;
    bottom: 20px;
  }
}
</style>